<template>
  <!-- 新增 fullscreen 容器，确保占满父级 -->
  <div class="fullscreen-container"> 
    <div class="login-box">
      <!-- 标题 -->
      <h2 class="title">用户登录</h2>
      <!-- 账号输入 -->
      <div class="input-group">
        <label>账号：</label>
        <input
          v-model="username"
          type="text"
          placeholder="请输入账号"
        />
      </div>
      <!-- 密码输入 -->
      <div class="input-group">
        <label>密码：</label>
        <input
          v-model="password"
          type="password"
          placeholder="请输入密码"
        />
      </div>
      <!-- 登录按钮 -->
      <button class="login-btn" @click="handleLogin">
        登录
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 响应式数据
const username = ref('')
const password = ref('')

// 登录逻辑（可扩展为 API 请求）
const handleLogin = () => {
  if (!username.value || !password.value) {
    alert('请填写完整账号和密码！')
    return
  }
  // 模拟登录成功（实际需调用后端接口）
  alert(`登录成功：\n账号：${username.value}\n密码：${password.value}`)
}
</script>

<style scoped>
/* 关键：让 fullscreen-container 占满父级（App.vue 的 #app） */
.fullscreen-container {
  width: 100%;
  /* 继承父级高度（App.vue 的 100vh） */
  height: 100%; 
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* 设置背景图片 */
  background-image: url('@/assets/bjt4.jpg'); /* 替换为你的图片路径 */
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中显示 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}

.login-box {
  /* 原有样式保持 */
  width: 320px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.9); /* 半透明背景，让表单内容更清晰 */
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
.title {
  text-align: center;
  font-size: 20px;
  color: #333;
  margin-bottom: 24px;
}

/* 输入组样式 */
.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.input-group label {
  width: 60px;
  color: #666;
}

.input-group input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}

.input-group input:focus {
  border-color: #409eff; /* 聚焦高亮 */
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  padding: 10px;
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.login-btn:hover {
  background: #66b1ff;
}
</style>